<template>
  <div class="task-item">
    <div class="task-item-header">
      <h3>{{ task.name }}</h3>
      <div class="task-item-actions">
        <button @click="$emit('edit', task)">编辑</button>
        <button @click="$emit('delete', task.id)">删除</button>
      </div>
    </div>
    <div class="task-item-phases">
      <div v-for="(phase, index) in task.phases" :key="index" class="task-phase">
        <div class="phase-dates">
          <span>{{ phase.name || `阶段 ${index + 1}` }}: {{ formatDate(phase.startDate) }} - {{ formatDate(phase.endDate) }}</span>
        </div>
        <ProgressBar :progress="calculateProgress(phase.startDate, phase.endDate)" />
      </div>
    </div>
    <div class="task-item-footer">
      <span>创建于: {{ formatDate(task.createTime) }}</span>
      <span>更新于: {{ formatDate(task.updateTime) }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { Task } from '../types/task';
import { formatDate } from '../utils/dateUtils';
import { calculateProgress } from '../utils/dateUtils';
import ProgressBar from './ProgressBar.vue';

defineProps<{
  task: Task;
}>();

defineEmits<{
  (e: 'edit', task: Task): void;
  (e: 'delete', taskId: string): void;
}>();
</script>

<style scoped lang="less">
.task-item {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    h3 {
      margin: 0;
    }
  }

  &-actions {
    display: flex;
    gap: 8px;
  }

  &-phases {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
  }

  .task-phase {
    .phase-dates {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
      font-size: 0.9em;
    }
  }

  &-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: #666;
    margin-top: 8px;
  }
}
</style>